<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>

    <script src="../js/vue.js">

    </script>
</head>
<body>

<div id="root">
    <form @submit.prevent="test">
        账号: <input type="text" v-model="userInfo.account"><br/><br/>
        密码: <input type="password" v-model="userInfo.password"><br/><br/>
        性别:
        男<input type="radio" v-model="userInfo.gender" value="male">
        女<input type="radio" v-model="userInfo.gender" value="female"><br/><br/>
        <!--
            v-model.number 可以将输入的值转换为数字类型
            v-model.trim 可以将输入的值去除前后空格
            v-model.lazy 可以将输入的值延迟更新(失去焦点后再收集)
        -->
        年龄: <input type="number" v-model.number="userInfo.age"><br/><br/>
        爱好:
        <input type="checkbox" v-model="userInfo.hobby" value="basketball">篮球
        <input type="checkbox" v-model="userInfo.hobby" value="rap">rap
        <input type="checkbox" v-model="userInfo.hobby" value="sing">唱<br/><br/>
        所属校区:
        <select v-model="userInfo.campus">
            <option value="">请选择校区</option>
            <option value="1">北京校区</option>
            <option value="2">上海校区</option>
            <option value="3">广州校区</option>
        </select><br/><br/>
        其他信息:
        <textarea v-model="userInfo.otherInfo"></textarea><br/><br/>
        <input type="checkbox" v-model="userInfo.isAgree">同意<a href="https://">用户协议</a><br/><br/>
        提交: <input type="submit" value="提交">
    </form>


</div>

<script type="text/javascript">
    Vue.config.printWarnings = false;
    const vm = new Vue({
        el: '#root',
        data: {
            userInfo: {
                account: '',
                password: '',
                gender: '',
                age: '',
                hobby: [],
                campus: '',
                otherInfo: '',
                isAgree: '',
            }
        },
        methods: {
            test: function () {
                console.log(this.userInfo);

            }
        }
    })

</script>
</body>

</html>